{{define "add"}} {{template "left" .}}
<style type="text/css">
    .select2 {
        margin-top: 5px
    }
</style>
<div id="add_order" class="layui-form">
    <!-- 用户信息 -->
    <fieldset class="layui-elem-field">
        <legend>选择用户</legend>
        <div class="layui-field-box">
            <div class="layui-form-item">
                <select class="user_select" lay-ignore style="width: 100%" v-model="userId">
                </select>
            </div>
            <!-- 用户信息 -->
            <template v-if="userInfo">
                <!-- 用户详情 -->
                <div class="layui-form-item">
                    <table class="layui-table">
                        <tr>
                            <td>
                                姓名:${userInfo.name}
                            </td>
                            <td>
                                手机:${userInfo.mobile}
                            </td>
                            <td>
                                余额:${userInfo.balance}
                            </td>
                            <td>
                                折扣:${userInfo.discount}
                            </td>
                        </tr>
                        <tr>
                            <td colspan="4">
                                地址:${userInfo.address}
                            </td>
                        </tr>
                    </table>

                </div>
                <!-- 快递费 -->
                <div class="layui-form-item">
                    <input type="text" name="exp_charge" v-model="expCharge" placeholder="请输入快递费" autocomplete="off" class="layui-input">
                </div>
            </template>
        </div>
    </fieldset>

    <!-- 选择产品 -->
    <fieldset class="layui-elem-field">
        <legend>选择产品</legend>
        <div class="layui-field-box">
            <table class="layui-table">
                <tr>
                    <td>
                        序号
                    </td>
                    <td>
                        产品
                    </td>
                    <td>
                        个数
                    </td>
                    <td>
                        序号
                    </td>
                    <td>
                        产品
                    </td>
                    <td>
                        个数
                    </td>
                </tr>

                <template v-for="item in list">
                    <tr>
                        <template v-if="$index%2==0">
                            <td>${item.id}</td>
                            <td>${item.product_name}(${item.price})(库存:${item.count})</td>
                            <td><input type="text" name="balance" v-model="count[item.id]" autocomplete="off" class="layui-input"></td>
                            <template v-if="list[$index+1]">
                                <td>${list[$index+1].id}</td>
                                <td>${list[$index+1].product_name}(${list[$index+1].price})(库存:${list[$index+1].count})</td>
                                <td><input type="text" name="balance" v-model="count[list[$index+1].id]" autocomplete="off" class="layui-input"></td>
                            </template>
                        </template>
                    </tr>
                </template>
            </table>
        </div>
    </fieldset>

    <!-- 下单 -->
    <div class="layui-form-item">
        <button class="layui-btn" lay-submit lay-filter="orderAdd">下单</button>
    </div>
</div>
<script>
    require(['jquery', 'vue', 'select2', 'layui'], function ($, Vue) {
        var addOrderVue = new Vue({
            el: '#add_order',
            data: {
                userId: "",
                expCharge: "",
                userInfo: "",
                list: jQuery.parseJSON('{{.List}}'),
                count: {}
            },
            methods: {
            }
        });

        layui.use(['form', 'layer'], function () {
            var form = layui.form;
            var layer = layui.layer;
            form.on('submit(orderAdd)', function (data) {
                console.log(addOrderVue);
                var datas = {};
                datas.user_id = addOrderVue.userId;
                datas.exp_charge = addOrderVue.expCharge;
                datas.count = JSON.stringify(addOrderVue.count);
                $.post("/Order/add?id={{.Id}}", datas, function(result) {
                    if (result.Code == 200) {
                        location.href = "/Order/Manage";
                    } else {
                        layer.msg(result.Message)
                    }
                },"json")
            })
        });

        $(".user_select").select2({
            placeholder: "搜:客户id/姓名/电话/地址",
            allowClear: true,
            ajax: {
                url: "/Customer/Select2",
                dataType: 'json',
                delay: 250,
                data: function (params) {
                    return {
                        q: params.term, // search term
                        page: params.page
                    };
                },
                processResults: function (data, params) {
                    // parse the results into the format expected by Select2
                    // since we are using custom formatting functions we do not need to
                    // alter the remote JSON data, except to indicate that infinite
                    // scrolling can be used
                    params.page = params.page || 1;

                    return {
                        results: data.Items,
                        pagination: {
                            more: (params.page * 10) < data.Total
                        }
                    };
                },
                cache: true
            },
            escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
            // minimumInputLength: 1,
        });

        $(".user_select").change(function () {
            addOrderVue.userId = $(this).val();
            console.log(addOrderVue.count);
            $.getJSON("/Customer/Info", { 'id': addOrderVue.userId }, function (data) {
                if (data.Code == 200) {
                    // console.log(data.Result)
                    addOrderVue.userInfo = data.Result;
                }
            })
        })
    })

</script>
{{template "footer"}} {{end}}